<template>
  <div>
    <div style="margin: 10px 0">
      <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>物资记录</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <h2>物资记录 <i class="el-icon-notebook-1"></i></h2>
    <el-divider></el-divider>
    <el-button type="primary" @click="handleAdd" class="mr-5">新增物资订单记录<i class="el-icon-circle-plus-outline"></i>
    </el-button>
    <div class="block">
      <el-timeline :reverse="true">
        <el-timeline-item v-for="order in orders" :timestamp="order.receiveDate" placement="top">
          <el-card>
<!--            <el-button type="success" class="info" v-show="!order.orderState"><i class="el-icon-view" @click="showInfo()" >处理订单</i>-->
<!--            </el-button>-->
            <el-descriptions title="使用记录详情" direction="vertical" :column="3" border>
              <el-descriptions-item label="物资名称">{{ order.material.name }}</el-descriptions-item>
              <el-descriptions-item label="数量">{{ order.num }}</el-descriptions-item>
              <el-descriptions-item label="业务类型">{{ order.businessType|showType }}</el-descriptions-item>
              <el-descriptions-item label="收货方">{{ order.receiveCompany.companyName}}</el-descriptions-item>
              <el-descriptions-item label="价格">{{ order.money }}</el-descriptions-item>
              <el-descriptions-item label="订单状态">{{ order.orderState|state }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog title="新增物资订单记录" :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="order" ref="order"
               label-width="100px" class="demo-dynamic" :rules="rules">
        <el-form-item label="物资" prop="vehicleId" label-width="100px">
          <el-select v-model="material" placeholder="请选择物资" value-key="id"  @change="OMchange">
            <el-option
                v-for="item in materials"
                :key="item.id"
                :label="item.name"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购数量" label-width="100px" prop="num" v-show="material.id">
          <el-input-number v-model="order.num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="收货方" prop="vehicleId" label-width="100px">
          <el-select v-model="order.companyRecive" placeholder="请选择收货方">
            <el-option
                v-for="item in companys"
                :key="item.companyId"
                :label="item.companyName"
                :value="item.companyId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总金额" label-width="100px" prop="money">
          <el-input v-model="order.money" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="业务类型" label-width="100px" prop="businessType">
          <el-select v-model="order.businessType" placeholder="请选择业务类型">
            <el-option label="运输" value="1"></el-option>
            <el-option label="配送" value="2"></el-option>
            <el-option label="仓储" value="3"></el-option>
            <el-option label="流通加工" value="4"></el-option>
            <el-option label="快递" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="save('order')">{{ btnText }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "OfficeUsage",
  data() {
    return {
      dialogFormVisible: false,
      order: {},
      btnText: '',
      materials: [],
      orders: [],
      vehicleId: 0,
      address: '',
      companys:[],
      material:{},
      rules: {},
    }
  },
  filters:{
    state(s){
      if (s){
        return '已完成'
      }else {
        return '未完成'
      }
    },
    showType(t){
      switch (t){
        case 1:return '运输'
        case 2:return '配送'
        case 3:return '包装'
        case 4:return '流通加工'
        case 5:return '快递'
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/materialInfo/get").then(res => {
        this.materials = res.data
      })
      request.get("/materialOrder").then(res => {
        this.orders = res.data
      })
      request.get("/company/getall").then(res => {
        this.companys = res.data
      })

    },
    handleAdd() {
      this.btnText = "添加"
      this.address = ''
      // this.vehicleRepair={}
      this.dialogFormVisible = true
    },
    showInfo() {
      // this.$router.push("/materialslPurchase")
    },
    materialChange(index) {
      console.log(index)
      // this.dynamicValidateForm.domains[index].max=stock
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
      });
    },
    handleChange(num) {
      this.order.money = (this.material.materialprice.outPrice * num).toFixed(2)
    },
    save(order) {
      this.$refs[order].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          this.order.payStatus = 0
          this.order.orderState = 0
          request.post("/materialOrder", this.order).then(res => {
            if (res.code===200) {
              this.$message.success("添加成功")
              this.load()
            } else {
              this.$message.error("添加失败")
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    OMchange(item){
      this.order.materialId = item.id;
    },
  }
}
</script>

<style scoped>
.block {
  margin-top: 30px;
  width: 80%;
}

.info {
  float: right;
  top: 10px;
  right: 20px;
  padding: 10px;
}
</style>